<template>
	<view class="detailsPage paper searchPage customTitleBar" :style="{borderTopWidth:statusBarHeight}">
		<view class="custom-status-bar" :style="{backgroundColor: customTitleBarBg,height:statusBarHeight}"></view>
		<view class="custom-nav-bar" :style="{top:statusBarHeight,backgroundColor: customTitleBarBg,}">
			<text class="title-green">搜索</text>
		</view>
		<view class="search-bar">
			<view class="search-form">
				<input type="text" placeholder="搜索关键字查询" v-model="searchInput" confirm-type="search" @confirm="toSearchResults">
				<view class="btn-clear" @click.stop="clearInput" v-show="searchInput !=''">清除</view>
			</view>
		</view>
	<!-- 	<view class="container-wrap">
			<view class="container">
				<view class="title-bar">热门搜索</view>
				<view class="popular-search">
					<view class="popular-item">姓张姓氏</view>
					<view class="popular-item">姓王姓氏</view>
					<view class="popular-item">姓林姓氏</view>
					<view class="popular-item">姓张姓氏图片</view>
					<view class="popular-item">姓刘的图片</view>
					<view class="popular-item">姓郭姓氏</view>
				</view>
				<view class="title-bar">历史搜索</view>
				<view class="history-search">
					<view class="history-item" @click="toSearchResults">姓张姓氏<view class="btn-del" @click.stop="">删除</view></view>
					<view class="history-item" @click="toSearchResults">姓张姓氏<view class="btn-del" @click.stop="">删除</view></view>
					<view class="history-item" @click="toSearchResults">姓张姓氏<view class="btn-del" @click.stop="">删除</view></view>
					<view class="history-item" @click="toSearchResults">姓张姓氏图片<view class="btn-del" @click.stop="">删除</view></view>
				</view>
			</view>
		</view> -->
		<!-- 底部导航s -->
		<view class="menu-bar">
			<view class="menu-bar-item" @click="toHome"><view class="icon icon-home"></view><text>首页</text></view>
			<view class="menu-bar-item" @click="toPersonalCenter"><view class="icon icon-me"></view><text>我的</text></view>
		</view>
		<!-- 底部导航s -->
	</view>
</template>

<script>
	var statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 'px'
	export default {
		data() {
			return {
				customTitleBarBg: 'rgba(250,250,250,1)',
				statusBarHeight: statusBarHeight,
				searchInput: '',
			}
		},
		methods: {
			clearInput() {
				this.searchInput = '';
			},
			toSearchResults() {
				uni.redirectTo({
					url: '../searchResults/searchResults?searchInput='+this.searchInput,
				});
			},
			toHome() {
				uni.redirectTo({
					url: '../index/index',
				});
			},
			toPersonalCenter() {
				uni.redirectTo({
					url: '../personalCenter/personalCenter',
				});
			},
			
		}
	}
</script>

<style>
	page{background-color: #fff;}
</style>